<template>
<div>
    <!-- 加载更多按钮 -->
    <div class="load-more" v-if="hasMore && !loading" @click="$emit('load-more')">
        <span>加载更多</span>
    </div>
    <!-- 加载中状态 -->
    <div class="loading" v-if="loading">
        <van-loading type="spinner" size="24px">加载中...</van-loading>
    </div>
</div>
</template>

<script>
export default {
    name: 'LoadMore',
    props: {
        hasMore: {
            type: Boolean,
            default: false
        },
        loading: {
            type: Boolean,
            default: false
        }
    }
}
</script>

<style scoped>
.load-more {
    text-align: center;
    padding: 15px 0;
    color: #1989fa;
    font-size: 14px;
}

.loading {
    text-align: center;
    padding: 15px 0;
    color: #999;
    font-size: 14px;
}
</style>